import { Input, Row, Col, Form, Button } from 'antd';
import React, { useState, useImperativeHandle, forwardRef, memo, useRef } from 'react';
import '@ant-design/compatible/assets/index.css';
import styles from './AuditForms.less';
import { connect } from 'dva';
const FormItem = Form.Item


const CompensationForm = forwardRef((props, ref) => {
  const [initValue, setinitValue] = useState(200) // 补偿默认值
  const [childRatio, setChildRatio] = useState(50) // 儿童比例默认值
  const [babyRatio, setBabyRatio] = useState(10) // 婴儿比例默认值
  const [recoup, setRecoup] = useState(false) // 补偿是否可输入

  useImperativeHandle(ref, () => ({
    // handleSubmit 就是暴露给父组件的方法 用于验证表单
    handleSubmit
  }));

  const { cData, handleStandard } = props
  const { getFieldDecorator, validateFields } = props.form;

  // 提交函数
  const handleSubmit = () => {
    validateFields((err, values) => {
        props.handleValues(err ? null : { ...values, childRatio, babyRatio }); //将参数传回父组件
    });
  };

  const verifyIntegerFun = (rule, value, callback) => {
    if (value === '' || (value % 100 != 0 || value > 10000)) {
      callback('请输入倍数为100的整数(不大于10000)');
    } else {
      props.handleValues(value);
      props.dispatch({
        type: 'auditDetail/changeCompensationAmount',
        payload: { compensationAmount: {
          baseAmount:value,
          childAmount:50,
          babyAmount:10,
        }}
      })
      callback();
    }
  };
  const verifySpreadFun = (rule, value, callback) => {
    if (value === '') {
      callback('请输入自定义金额');
    } else if (value > 9999) {
      callback('自定义金额最大值为9999');
    } else {
      props.handleValues(value == 0 ? initValue : 0);
      props.dispatch({
        type: 'auditDetail/changeCompensationAmount',
        payload: { compensationAmount: 
          {
            baseAmount:value == 0 ? initValue : value,
            childAmount:value == 0 ? 50 : 0,
            babyAmount:value == 0 ? 10 : 0,
          } }
      })
      setChildRatio(value == 0 ? 50 : 0);
      setBabyRatio(value == 0 ? 10 : 0);
      setRecoup(value == 0 ? false : true);
      callback();
    }
  };
  // 金额的input change函数
  const inputChange = (e) => {
    //限制输入 
    e.target.value = e.target.value.replace(/[^\d]/g, '');
    // 同步设置金额
    props.form.setFieldsValue({
      economyClass: e.target.value,
      businessClass: e.target.value,
      firstClass: e.target.value,
    });
    // 上面三个标准不为0，差价就为0 
    if (e.target.value !== 0) {
      props.form.setFieldsValue({
        spread: 0,
      });
    }
  }
  // 自定义金额的input change函数
  const selfInputChange = (e) => {
    //限制输入  
    e.target.value = e.target.value.replace(/[^\d]/g, ''); //只能数字
    e.target.value = e.target.value.length > 1 ? e.target.value.replace(/\b(0+)/gi, "") : e.target.value; //不能0开头
    // 差价为0 上面三个正常输入
    // 差价不为0 上面三个不能输入  都把值置零
    props.form.setFieldsValue({
      economyClass: e.target.value == 0 ? initValue : 0,
      businessClass: e.target.value == 0 ? initValue : 0,
      firstClass: e.target.value == 0 ? initValue : 0,
    });
  }
  return (
    <div className='formItems'>
      <Form onSubmit={handleSubmit}>
        <Row gutter={16}>
          <Col md={6} >
            <FormItem label='经济舱：'>
              {getFieldDecorator('economyClass', {
                initialValue: initValue,
                rules: [
                  {
                    type: 'integer',
                    validator: verifyIntegerFun
                  }
                ],
              })(<Input onChange={(e) => inputChange(e)} maxLength={5} disabled={recoup} addonAfter="(元)" placeholder="请输入经济舱补偿标准" />)}
            </FormItem>

          </Col>
          <Col md={6} >
            <FormItem label='儿童比例：'>
              <Input value={childRatio} addonAfter="(%)" disabled />
            </FormItem>
          </Col>
          <Col md={6} >
            <FormItem label='婴儿比例：'>
              <Input value={babyRatio} addonAfter="(%)" disabled />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col md={6} >
            <FormItem label='公务舱：'>
              {getFieldDecorator('businessClass', {
                initialValue: initValue,
                rules: [
                  {
                    type: 'integer',
                    validator: verifyIntegerFun
                  }
                ],
              })(<Input onChange={(e) => inputChange(e)} maxLength={5} disabled={recoup} addonAfter="(元)" placeholder="请输入公务舱补偿标准" />)}
            </FormItem>
          </Col>
          <Col md={6} >
            <FormItem label='儿童比例：'>
              <Input value={childRatio} addonAfter="(%)" disabled />
            </FormItem>
          </Col>
          <Col md={6} >
            <FormItem label='婴儿比例：' >
              <Input value={babyRatio} addonAfter="(%)" disabled />
            </FormItem>
          </Col>
        </Row>
        {/* <Row gutter={16}>
          <Col md={6} >
            <FormItem label='头等舱：'>
              {getFieldDecorator('firstClass', {
                initialValue: initValue,
                rules: [
                  {
                    type: 'integer',
                    validator: verifyIntegerFun
                  }
                ],
              })(<Input onChange={(e) => inputChange(e)} maxLength={5} disabled={recoup} addonAfter="(元)" placeholder="请输入头等舱补偿标准" />)}
            </FormItem>
          </Col>
          <Col md={6} >
            <FormItem label='儿童比例：'>
              <Input value={childRatio} addonAfter="(%)" disabled />
            </FormItem>
          </Col>
          <Col md={6} >
            <FormItem label='婴儿比例：' >
              <Input value={babyRatio} addonAfter="(%)" disabled />
            </FormItem>
          </Col>
        </Row> */}
        <Row gutter={16}>
          <Col md={6} >
            <FormItem label='自定义金额：'>
              {getFieldDecorator('spread', {
                initialValue: 0,
                rules: [
                  {
                    type: 'integer',
                    validator: verifySpreadFun,
                  }
                ],
              })(<Input onChange={(e) => selfInputChange(e)} maxLength={4} addonAfter="(元)" placeholder='请输入自定义金额' />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  )
})
/**
 * 优化渲染
 */
function carefulRender(prevProps, nextProps) {
  if (JSON.stringify(prevProps) != JSON.stringify(nextProps)) {
      return false
  } else {
      return true
  }
}
export default connect(state=>state.auditDetail)(Form.create()(memo(CompensationForm)), carefulRender);

